import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Input, Textarea, Image, Button } from '@tarojs/components'

import { AtButton }  from 'taro-ui'

import ManIcon from './man.svg'
import PositionIcon from './position.svg'
import './Profile.scss'

export default class extends Component {
  config: Config = {
    navigationBarTitleText: '我的收货地址'
  }

  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount() { }

  componentWillMount() {
    // 详情页 ID
    console.log(this.$router.params, 123321)
  }

  componentDidShow() { }

  componentDidHide() { }

  onAddPhoneContact = () => {
    // 手机联系人
    Taro.addPhoneContact({})
      .then(res => console.log('手机联系人', res))
      .catch(e => console.log(e))
  }

  onGetLocation = () => { 
    // 获取位置
    Taro.chooseLocation()
      .then(res => console.log('获取位置', res))
      .catch(e => console.log(e))
  }

  render() {
    return (
      <View className='addressProfile'>
        <View className='cell'>
          <View className='label'>
            <Text className='text'>收货人</Text>
          </View>
          <View className='content'>
            <Input type='text' placeholder='姓名' className='edit' focus />
          </View>
          <Image src={ManIcon} className='navigate' onClick={this.onAddPhoneContact.bind(this, 0)} />
        </View>
        <View className='cell'>
          <View className='label'>
            <Text className='text'>手机号码</Text>
          </View>
          <View className='content'>
            <Input type='number' placeholder='请输入11位手机号' className='edit' />
          </View>
        </View>
        <View className='cell'>
          <View className='label'>
            <Text className='text'>地区信息</Text>
          </View>
          <View className='content'>
            <Textarea placeholder='地区信息' className='edit' value='' autoHeight />
          </View>
          <Image src={PositionIcon} className='navigate' onClick={this.onGetLocation.bind(this, 0)} />
        </View>
        <View className='cell'>
          <View className='label'>
            <Text className='text'>详细地址</Text>
          </View>
          <View className='content'>
            <Textarea placeholder='请输入街道门牌号' className='edit' value='' autoHeight />
          </View>
        </View>
        <View className='cell'>
          <View className='label'>
            <Text className='text'>邮政编码</Text>
          </View>
          <View className='content'>
            <Input type='number' placeholder='请输入邮政编码' className='edit' />
          </View>
        </View>
        <View className='buttonFix'>
          <AtButton type='primary'>提交</AtButton>
        </View>
      </View>
    )
  }
}
